<template>
  <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <ul>
      <li v-for="movieObj in movieList" :key="movieObj.date" class="list-item">
        <div class="movie-list">
          <div class="pub-date">{{ movieObj.comingTitle }}</div>

          <div class="movie" v-for="movie in movieObj.movies" :key="movie.id">
            <img :src="movie.img" :alt="movie.nm" class="movie-thumb" @click="gotoMovieDetail(movie.id)" />
            <div class="movie-info" @click="gotoMovieDetail(movie.id)">
              <div class="title">
                <h3>{{ movie.nm }}</h3>
              </div>
              <div class="rank">
                <span class="wish"> {{ movie.wish }}</span><span>想看</span>
              </div>
              <div class="actors">主演:{{ movie.star }}</div>
              <div class="arrangement">{{ movie.rt }}上映</div>
            </div>
            <van-button class="buy" :color="movie.showStateButton.color" block round size="small"
              v-if="movie.showStateButton" :text="movie.showStateButton.content"
              @click.stop="BuyTicket(movie.id)"></van-button>
            <van-button class="buy" color="#faaf00" block round size="small" v-else text="想看" @click.stop="
              showToast('需要登陆标记')"></van-button>
          </div>

        </div>
      </li>
    </ul>
  </van-list>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { fetchComingSoonMovies, fetchMoreComingSoonMovies } from '@/api/index.js'

import { adjustMovieData } from "@/tools/index.js"

import { useStore } from '@/stores'
const store = useStore()

import { useRouter } from 'vue-router'
const router = useRouter()


const loading = ref(false)
const finished = ref(false)

const limit = ref(10)

const pageNum = ref(1)

const offset = computed(() => {
  return (pageNum.value - 1) * limit.value
})

const movieList = ref([]) //当前即将上映电影
const movieIds = ref([]) //全部即将上映电影ID

const currentMovieListLength = computed(() => {
  return movieList.value.reduce((accumulator, currentObject) => {
    return accumulator + currentObject.movies.length;
  }, 0);
});


const remainingMovieIds = computed(() => {
  return movieIds.value.slice(currentMovieListLength.value) //更多待映电影ID
})

// const total = ref(0)

const desc = computed(() => {
  return '观众评分：' + movie.sc
})

const gotoMovieDetail = (movieId) => {
  // console.log("电影ID", movieId);
  router.push({ path: `/movie/${movieId}` })
};

const BuyTicket = (movieId) => {
  router.push({ path: `/cinema/movie/${movieId}` })
}


onMounted(async () => {
  loading.value = true

  const res = await fetchComingSoonMovies(store.currentCity.id, limit.value)
  movieList.value = adjustMovieData(res.coming)//加载当前待映列表  先排序
  movieIds.value = res.movieIds //全部待映ID

  // console.log("movieList.value:", movieList.value);


  // 数据存入pinia
  store.setComingMovieList(movieList.value)
  store.setComingMovieIds(res.movieIds)

  loading.value = false
})

const onLoad = async () => {
  loading.value = true
  // 加载更多待映电影

  const res = await fetchMoreComingSoonMovies(
    store.currentCity.id,
    limit.value,
    remainingMovieIds.value.splice(0, 10).join(','),
  )
  // movieList.value.push(...adjustMovieData(res.coming))
  // 合并新数据并重新分组和排序
  movieList.value = adjustMovieData([...movieList.value.flat().map(movieObj => movieObj.movies).flat(), ...res.coming]);
  // console.log("movieList.value:", movieList.value);
  store.setComingMovieList(movieList.value)

  loading.value = false

  if (currentMovieListLength.value >= movieIds.value.length) {
    finished.value = true
    // showToast({ message: '没有更多了' })
    return
  }
};
</script>

<style scoped>
.list {
  background-color: #fff;
  margin-top: 10px;
  /* margin-bottom: 50px; */
}

.list-item {
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
  padding: 10px;
  /* border-bottom: 1px solid #eee; */
}


.movie-list .pub-date {
  font-size: 14px;
  color: #333;
}

.movie {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
  padding: 10px 0px;
}

.movie:last-child {
  border-bottom: none;
}

.movie-thumb {
  cursor: pointer;
  width: 64px;
  height: 90px;
  margin-right: 10px;
}

.movie-info {
  cursor: pointer;
  width: 200px;
  font-size: 13px;
  color: #777;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  align-items: flex-start;
  justify-content: center;
  text-overflow: ellipsis;
}

.movie-info .title {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.movie-info .title h3 {
  font-size: 17px;
  color: #333;
  margin: 0 0 5px 0;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.movie-info .actors,
.movie-info .arrangement {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.movie-info .wish {
  color: #faaf00;
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
}


.buy {
  color: #fff;
  font-size: 13px;
  width: 60px;
  height: 32px;
  line-height: 32px;
}
</style>
